<template>
  <div class="affiliation-page-top">
    <div class="type">AFFILIATION-INFORMATION</div>
    <div class="top-top">
      <block class="block">
        <h1>{{name}}</h1>
      </block>
    </div>
    <div class="top-middle">
      <block class="block" title="Top-Cited-Author">
        <div class="content">
          <h4 class="name" :title="`Top Cited Author: ${topCitedAuthor.name}`">{{topCitedAuthor.name}}</h4>
          <h4 class="number" :title="`Cited Num: ${topCitedAuthor.citedNum}`">{{topCitedAuthor.citedNum}}</h4>
        </div>
        <div class="line"></div>
        <a :href="`/#/author/${topCitedAuthor.authorId}`" class="regular-link">View Profile</a>
      </block>
      <block class="block" title="Top-Co-Affiliation">
        <div class="content">
          <h4 class="name" :title="`Top Cited Author: ${topCoAffiliation.name}`">{{topCoAffiliation.name}}</h4>
          <h4 class="number" :title="`Cited Num: ${topCoAffiliation.citedNum}`">{{topCoAffiliation.collaborationNum}}</h4>
        </div>
        <div class="line"></div>
        <a :href="`/#/affiliation/${topCoAffiliation.affiliationId}`" class="regular-link">View Search</a>
      </block>
    </div>
  </div>
</template>

<script>
import Block from '@/components/Block/AffiliationPageBlock';
export default {
  name: "AffiliationPageTop",
  props: {
    msg: Object
  },
  data() {
    return {

    };
  },
  computed: {
    name() {
      return this.msg.name ?? 'Loading';
    },
    topCitedAuthor() {
      return this.msg.topCitedAuthor ?? 'None';
    },
    topCoAffiliation() {
      return this.msg.topCoAffiliation ?? 'None';
    }
  },
  mounted() {
    
  },
  watch: {

  },
  methods: {

  },
  components: {
    Block
  },
};
</script>

<style scoped lang="scss">
.affiliation-page-top {
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;

  >div {
    margin-bottom: 10px;
  }

  >.type {
    color: #757575;
    font-size: 12px;
    font-weight: 400;
  }

  >.top-top{
    >.block {
    display: flex;
    justify-content: center;
    align-items: center;
      >h1 {

      }
    }
  }

  .top-middle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    >.block {
      height: 178px;
      display: flex;
      flex-direction: column;
      >.content {
        display: flex;
        >h4.name {
          padding: 16px 16px 16px 16px;
          font-size: 26px;
          color: #cb6d1c;
          height: 54px;
          margin-bottom: 10px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        >h4.number {
          flex: 1;
          display: flex;
          font-size: 1.3em;
          font-family: 'Texturina', serif;
          justify-content: center;
          align-items: center;
        }
        
        
      }
      >a {
        display: flex;
        flex: 1;
        padding-right: 20px;
        justify-content: flex-end;
        align-items: center;
      }
      
    }
  }
  
}
</style>
